<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 深入了解vuex 和 locaLstorage区别 </title>
</head>
<body>
    
</body>
</html>
<script>
/*
    ####最重要的区别？
        vuex存储在内存中
        localStorage则以文件的方式存储在本地 localstorage只能存储 
        localStorage只能存储字符串类型的数据 
        存储对象需要JSON的stringify和parse方法进行处理 读取内存比读取硬盘速度快


   ####应用场景?
       vueX是一个专为vue.js应用程序开发的状态管理模式 vuex用于组件传值 
       localstorage 是本地存储 是将数据储存到浏览器的方法 (跨页面传递数据时使用)
       vuex能做到数据的响应式 localStorage不能
              

   ####永久性？
      刷新页面时vuex存储的值会丢失 localstroage不会  


      注意 觉得locastorage可以代替vuex 对于不变的数据可以 
      但是当两个组件共用一个数据源(对象&数组)时 如果其中一个组件改变了该数据源 
      希望另一个组件响应变化时 localstorge无法做到 因为14 15 16行  
    

      vuex 刷新丢失数据bug解决？
      在页面刷新时vuex里的数据会重新初始化 导致数据丢失 
      因为vuex里的数据是保存在运行内存的 当页面刷新时页面重新加载 vue实例 vuex的数据就会被重新赋值 
      解决思路？
      方法1 将vuex中的数据 直接保存至浏览器缓存中 sessionStoraage localStoraage cookie 
      方法2 在页面刷新的时候 再次请求数据 动态更新vuex数据 等等 
*/


</script>